<template>
  <el-main class="image-main" v-loading="loading">
    <div class="top p-3">
      <el-empty v-if="tableData.length == 0 && !loading" description="暂无图片"></el-empty>
      <el-row :gutter="15">
        <el-col :span="3" :offset="0" v-for="(item,index) in tableData" :key="index">
          <el-card v-if="queryParams.type==1" shadow="hover" @click="handleChange(item,index)" class="relative mb-3 cursor-pointer" :body-style="{ 'padding':0 }" :class="{ 'border-blue-500':item.checked }">
            <img v-image-decrypt='item.fileUrl' fit="cover" class="img-h150"  style="width: 100%;">
            <div class="image-title">{{ item.originalName }}</div>
            <div class="flex align-center justify-center p-2">
              <el-checkbox v-model="item.selected" />
              <el-button type="primary" size="small" text >重命名</el-button>
              <el-popconfirm
                  title="是否删除该图片？"
                  confirmButtonText="确认"
                  cancelButtonText="取消"
                  @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button class="!m-0" type="primary" size="small" icon="delete" text>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
          <el-card v-if="queryParams.type==2 " shadow="hover" @click="handleChange(item,index)" class="relative mb-3 cursor-pointer" :body-style="{ 'padding':0 }" :class="{ 'border-blue-500':item.checked }">
            <img
                v-image-decrypt="item.status !== 2&&item.video!=null ? item.video.cover : './public/imgs/videoLoad.png'"

                   fit="cover" class="img-h150"  style="width: 100%;">
            <div class="image-title">{{ item.originalName }}</div>
            <div class="flex align-center justify-center p-2">
              <el-checkbox v-model="item.selected" />
              <el-button type="primary" size="small" @click="play(item.identifier)">播放</el-button>
<!--              <el-button type="primary" size="small" text >重命名</el-button>-->
              <el-popconfirm
                  title="是否删除该图片？"
                  confirmButtonText="确认"
                  cancelButtonText="取消"
                  @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button class="!m-0" type="primary" size="small" icon="delete" text>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <video-play-dialog ref="videoPlay">

    </video-play-dialog>
    <div class="bottom">
      <el-pagination
          background
          layout="prev,pager, next"
          :total="total"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          @current-change="handleCurrentChange"/>
    </div>
  </el-main>
</template>
<script setup>
import {findPages} from "@/api/resource";
import VideoPlayDialog from "../kva/VideoPlayDialog.vue";
const videoPlay=ref({})
const currentPage = ref(1)
const total = ref(100)
const limit = ref(10)
const tableData = ref([])
const loading = ref(false)
const emits = defineEmits(["select"])
const selectFiles = ref([])
const props = defineProps({
  type:{
    type:String,
    default:"checkbox"
  }
})
onMounted(()=>{
  loadData()
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 32,
  keyword: "",
  type:1
})
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  loadData()
}

const tableLoading=ref(false)
// 点击分页查询
const loadData = async () => {
   tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  currentPage.value = resp.data.pages * 1
}
const changeType = async (type,keyword) => {
   queryParams.type=type
  queryParams.keyword=keyword

  queryParams.pageNo=0
  loadData()
}
const play=(identifier)=>{
  const url = import.meta.env.VITE_UPLOAD_PATH + "/resource/upload/play/" + identifier;
  videoPlay.value.handleOpen(url)
}
// 选择
const handleChange = (item,index) => {
  if(props.type=='radio'){
   selectFiles.value = []
   list.value.filter(c=>c!=item).map(c=>{
     c.selected = false
     return c
   })
  }
  item.selected = !item.selected
  if(item.selected) {
    selectFiles.value.push(item)
  }else{
    var cindex = selectFiles.value.findIndex(c=>c.id==item.id)
    selectFiles.value.splice(cindex,1)
  }
  //alert(JSON.stringify( selectFiles.value))
  emits("select",selectFiles.value)
}
defineExpose({
  changeType,
  handleCurrentChange
})

</script>
<style>
.image-main {
  position: relative;
}

.image-main .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-main .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-title {
  position: absolute;
  top: 118px;
  left: -1px;
  right: -1px;
  font-size: 12px;
  color:#666;
  text-align: center;
  background: rgba(204, 204, 204, 0.9);
  padding: 10px 20px;
}
.img-h150{height: 150px;}
</style>